<template>
    <div class="shop">
        <nut-tabs v-model="tab" title-scroll title-gutter="10" name="tab" direction="vertical" @click="changeTab"
            type="line">
            <template #titles>
                <div v-for="(item, index) in classList" :key="item.id" class="custom-tab-item"
                    @click="getProduct(item)">
                    <div class="custom-title" :class="{
            active: tab === item.id
        }"><i class="line"></i><span v-if="!item.show || (item.show && !delBtn)" @click="changeShow(index)">{{
            item.name
        }}</span><nut-input :border="false" placeholder="分类名称" v-else v-model="item.name" clearable
                            clearSize="14" @blur="(e) => changeClass(e, item, index)" />
                        <CheckDisabled v-if="delBtn" color="#F25C26" size="14" @click="delCategory(item, index)" />
                    </div>
                </div>
                <div class="addClass" v-if="delBtn" @click="addCategory">
                    <nut-button shape="square" type="info">
                        <template #icon>
                            <Uploader color="#fff" size="12" />
                        </template>
                        添加分类
                    </nut-button>
                </div>
            </template>
            <nut-tab-pane v-for="(item, index) in classList" :key="item.id" :pane-key="item.id">
                <div class="tab-list" v-if="tab == item.id">
                    <div class="tab-item" v-for="ele in goodsList" :key="ele.goodsId" v-if="goodsList.length > 0"
                        @click="jumpTo(ele)">
                        <div class="flex-a">
                            <div class="img">
                                <img :src="ele.url[0]" mode="aspectFit" alt="">
                            </div>
                            <div class="title">
                                <div>{{ ele.name }}</div>
                                <div>月销{{ ele.alert }} <text>库存{{ ele.num }}</text></div>
                                <div>
                                    <text class="sell">{{ '￥' + ele.prodSpecInfoList[0].specSellingPrice }}</text>
                                </div>
                            </div>
                        </div>
                        <div class="bottom flex-a">
                            <div class="btn" @click="jumpTo('/packageA/pages/editGoods/index?type=edit&id=' + ele.id)">
                                编辑
                            </div>
                            <div class="btn" @click="productDown(ele)">{{ ele.disMem == false ? '上架' : '下架' }}</div>
                        </div>
                    </div>
                    <nut-empty v-else description="无数据"></nut-empty>
                </div>
            </nut-tab-pane>
        </nut-tabs>
        <div class="bottom-tab">
            <div class="item" @click="manageClass">
                <Category color="#2881B6" size="14" />
                <text>管理分类</text>
            </div>
            <!-- <div class="item">
                <HorizontalN color="#2881B6" size="14" />
                <text>商品排序</text>
            </div> -->
            <div class="item" @click="jumpTo('/packageA/pages/editGoods/index?type=add')">
                <Uploader color="#2881B6" size="14" />
                <text>新建商品</text>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro'
import { useReachBottom } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { CategoryPane } from "@nutui/nutui";
import { TriangleDown, Category, HorizontalN, Uploader, CheckDisabled } from '@nutui/icons-vue-taro';
import { prodList, getClass, addClass, updateClass, delClass, setDown } from '../../../../api/index'

export default {
    components: {
        Category,
        'nut-category-pane': CategoryPane,
        TriangleDown,
        HorizontalN,
        Uploader,
        CheckDisabled,
    },
    setup() {
        const data = reactive({
            pageNumber: 1,
            pageSize: 10,
            tab: 0,
            id: '',
            delBtn: false,
            classList: [] as any,
            goodsList: [] as any[],
            options: [] as any,
            brandId: '',
            options1: [
                { text: '默认排序', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 }
            ],
            price: 0,
        });
        onMounted(() => {
            getClassList()
        });
        const getList = () => {
            prodList({ sedCate: data.tab }).then(res => {
                if (res.code == 200) {
                    data.goodsList = res.rows
                }
            })
        }
        const getClassList = () => {
            getClass().then(res => {
                if (res.code == 200) {
                    data.classList = res.data
                    data.tab = res.data[0].id
                    getList()
                }
            })
        }
        const changeShow = (index) => {
            let arr = data.classList
            arr.forEach((item, i) => {
                i == index ? item.show = true : item.show = false
            })
            data.classList = arr
        }
        const changeClass = (e, item, index) => {
            console.log(e)
            if (item.id) {
                data.classList[index].show = false
                updateClass({ id: item.id, name: e.detail.value }).then(res => {
                    if (res.code == 200) {
                        Taro.showToast({
                            title: '更新成功',
                            icon: 'success',
                            duration: 2000
                        })
                        getClassList()
                    }
                })
            } else {
                addClass({ name: e.detail.value }).then(res => {
                    if (res.code == 200) {
                        Taro.showToast({
                            title: '添加成功',
                            icon: 'success',
                            duration: 2000
                        })
                        getClassList()
                    }
                })
            }
        }
        const manageClass = () => {
            data.delBtn = !data.delBtn
            let arr = data.classList
            arr.forEach(item => {
                item.show = !data.delBtn
            })
            data.classList = arr
        }
        const addCategory = () => {
            data.classList.push({
                id: '',
                name: '',
                show: true,
            })

        }
        const delCategory = (item, index) => {
            // data.classList.splice(index, 1)
            delClass(item.id).then(res => {
                if (res.code == 200) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                    getClassList()
                }
            })
        }
        const changeTab = (title) => {
            data.goodsList = []
            data.pageNumber = 1
            data.pageSize = 10
            data.brandId = ''
            data.price = 0
            let index = parseInt(title.paneKey)
            data.id = data.classList[index].catId
        }
        const scrolltoLower = (e) => {
            //console.log(e, '滚动到底部上拉加载')
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.pageNumber++
        })
        const jumpTo = (path) => {
            // Taro.navigateTo({ url: '/packageA/pages/productDetail/index?goodsId=' + item.goodsId });
            Taro.navigateTo({
                url: path
            })
        }
        const getProduct = (item) => {
            data.tab = item.id
            getList()
        }
        const productDown = (ele) => {
            setDown(ele.id).then(res => {
                if (res.code == 200) {
                    Taro.showToast({
                        title: ele.disMem == false ? '已上架' : '已下架',
                        icon: 'success',
                        duration: 2000
                    })
                    getList()
                }
            })
        }
        return {
            changeTab,
            scrolltoLower,
            jumpTo,
            getList,
            changeShow,
            changeClass,
            manageClass,
            addCategory,
            delCategory,
            getClassList,
            getProduct,
            productDown,
            ...toRefs(data)
        }
    }
};
</script>

<style lang="scss">
.nut-tabs__titles {
    white-space: normal !important;
}

.custom-tab-item {
    padding: 20px;
}

.custom-title {
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 26rpx;

    span {
        display: inline-block;
        width: 120rpx;
    }

    i.line {
        display: inline-block;
        width: 6rpx;
        height: 50rpx;
        background: transparent;
        margin-right: 10rpx;
    }

    .nut-input {
        padding: 3rpx 5rpx;
    }
}

.custom-title.active i.line {
    background: linear-gradient(to bottom, #FA2E1B, #F79D95, #F6D5D2);
}

.addClass {
    white-space: nowrap;
    text-align: center;

    .nut-button {
        width: 80%;
        margin: 0 auto;
        font-size: 22rpx;
        height: 50rpx;
        font-weight: bold;

        .nut-icon {
            position: relative;
            top: -2rpx;
            margin-right: 5rpx;
        }
    }
}

.shop {
    height: 100vh;

    .nut-tabs__content {
        min-height: 100vh;
    }

    .nut-tab-pane {
        padding: 0;
    }

    .tab-list {
        background: #F5F5F5;
        padding-top: 15rpx;
        padding-bottom: 50px;

        .tab-item {
            box-sizing: border-box;
            background: #fff;
            font-size: 24rpx;
            vertical-align: top;
            padding: 30rpx 20rpx;

            .img {
                width: 120rpx;
                text-align: center;
                height: 120rpx;
                background: #fff;
                border-radius: 20rpx;
                border: 1rpx solid #F1F1F1;

                img {
                    width: 80%;
                    height: 80%;
                    margin-top: 10%;
                }
            }

            .title {
                div:first-child {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    white-space: wrap;
                    color: #2A2A2A;
                    font-weight: bold;
                    font-size: 30rpx;
                }

                div:nth-child(2) {
                    color: #757575;
                    font-size: 24rpx;
                    margin: 5rpx 0 10rpx;
                }

                div:last-child {
                    white-space: nowrap;

                    .sell {
                        color: #F25C26;
                        font-size: 30rpx;
                        font-weight: bold;
                    }

                    text.line {
                        text-decoration: line-through;
                        color: gray;
                        font-size: 26rpx;
                        margin-left: 10rpx;
                    }
                }

                padding: 0 20rpx 5rpx;
                color: #131313;
                height: 100rpx;
                margin-bottom: 10rpx;
            }

            .foot {
                padding: 0 20rpx 10rpx;

                .price {
                    color: #4C505C;
                    white-space: nowrap;

                    span {
                        font-size: 34rpx;
                    }
                }
            }

            .bottom {
                justify-content: flex-end;
                padding: 20rpx 0 30rpx;
                border-bottom: 1rpx solid #F7F7F7;

                .btn {
                    width: 120rpx;
                    text-align: center;
                    height: 50rpx;
                    line-height: 50rpx;
                    border: 1rpx solid #4EABD8;
                    border-radius: 5rpx;
                    margin-left: 10rpx;
                    color: #4EABD8;
                }
            }
        }
    }

    .bottom-tab {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx 0;
        background: #fff;
        position: fixed;
        bottom: 0;
        box-shadow: 0 0 20rpx #F0F0F0;

        .item {
            display: inline-block;
            width: 50%;
            box-sizing: border-box;
            text-align: center;
            color: #333;
            font-weight: bold;
            font-size: 28rpx;

            text {
                margin-left: 8rpx;
                vertical-align: middle;
            }
        }

        .item:not(:last-child) {
            border-right: 1rpx solid #F0F0F0;
        }
    }
}
</style>